<template>
  <div>
    <!--  增加账号  -->
    <el-dialog
      title="提示"
      :visible.sync="userDialogVisible"
      width="30%"
      center>
      <el-form label-width="80px" :model="addUserForm" ref="addUserForm">
        <el-form-item label="账号" prop="id">
          <el-input v-model="addUserForm.id"></el-input>
        </el-form-item>
        <el-form-item label="初始密码" prop="password">
          <el-input v-model="addUserForm.password"></el-input>
        </el-form-item>
        <el-form-item label="学院" prop="password">
          <el-input v-model="addUserForm.house"></el-input>
        </el-form-item>
        <el-form-item label="身份" prop="type">
          <el-radio v-model="addUserForm.type" label="0">老师</el-radio>
          <el-radio v-model="addUserForm.type" label="1">学生</el-radio>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </span>
    </el-dialog>
    <!--删除老师-->
    <el-dialog
      title="密码验证"
      :visible.sync="deleteDialogVisible"
      width="35%"
      center>
      <el-form label-width="auto" label-position="left">
        <el-form-item label="请输入管理员密码" prop="password">
          <el-input v-model="pw"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="danger" @click="adminVerify">删 除</el-button>
      </span>
    </el-dialog>
    <!--删除学生-->
    <el-dialog
      title="密码验证"
      :visible.sync="deleteDialogVisible"
      width="35%"
      center>
      <el-form label-width="auto" label-position="left">
        <el-form-item label="请输入管理员密码" prop="password">
          <el-input v-model="pw"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="danger" @click="adminVerify">删 除</el-button>
      </span>
    </el-dialog>
    <!--  用户列表  -->
    <el-breadcrumb class="breadcrumb"></el-breadcrumb>
    <div class="top">
      <div class="tab">
        <div class="usertype">
          <li @click="num=0" :class="{active:num==0}">教师列表</li>
        </div>
        <div class="usertype">
          <li @click="num=1" :class="{active:num==1}">学生列表</li>
        </div>
      </div>
      <!--老师搜索-->
      <div class="searchBox" v-show="num==0">
        <el-dropdown @command="choiceCheck">
          <span class="el-dropdown-link">搜索内容<i class="el-icon-arrow-down el-icon--right"></i></span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="1">教职工号</el-dropdown-item>
            <el-dropdown-item command="0">学院</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown v-show="search==0" @command="houseteacherCheck">
          <span class="el-dropdown-link">学院<i class="el-icon-arrow-down el-icon--right"></i></span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="item in houseList" v-bind:key="item.id" v-text="item" :command="item"></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span class="house" v-show="search==0">{{teachersearchhouse}}</span>
        <el-input placeholder="搜索编号" prefix-icon="el-icon-search" v-model="teachersearchNumber" clearable
                  class="inputBox" v-show="search==1"></el-input>
        <el-button type="primary" v-show="isSearchingTeacher==0" @click="searchTeacher">搜索</el-button>
        <el-button type="primary" v-show="isSearchingTeacher==1" @click="cacelTeacherSearch">返回</el-button>
      </div>
      <!--学生搜索-->
      <div class="searchBox" v-show="num==1">
        <el-dropdown @command="choiceCheck">
          <span class="el-dropdown-link">搜索内容<i class="el-icon-arrow-down el-icon--right"></i></span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="1">学号</el-dropdown-item>
            <el-dropdown-item command="0">学院</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown v-show="search==0" @command="housestudentCheck">
          <span class="el-dropdown-link">学院<i class="el-icon-arrow-down el-icon--right"></i></span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="item in houseList" v-bind:key="item.id" v-text="item" :command="item"></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span class="house" v-show="search==0">{{studentsearchhouse}}</span>
        <el-input placeholder="搜索学号" prefix-icon="el-icon-search" v-model="studentsearchNumber" clearable
                  class="inputBox" v-show="search==1"></el-input>
        <el-button type="primary" v-show="isSearchingStudent==0" @click="searchStudent">搜索</el-button>
        <el-button type="primary" v-show="isSearchingStudent==1" @click="cacelStudentSearch">返回</el-button>
      </div>
    </div>
    <!--老师列表-->
    <div class="table" v-show="num==0">
      <el-table :data="teacherList" style="width: 100%">
        <el-table-column prop="teacherNumber" label="教职工号" width="300"></el-table-column>
        <el-table-column prop="name" label="姓名" width="300"></el-table-column>
        <el-table-column prop="house" label="学院" width="300"></el-table-column>
        <el-table-column prop="id" width="0" v-if="false"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="deleteTeacher(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination  v-show="num==0"
      layout="total, prev, pager, next"
      :page-size="pagination.page_size"
      :current-page="pagination.index"
      :total="pagination.total"
      @current-change="changeTeacherPage">
    </el-pagination>
    <!--学生列表-->
    <div class="table" v-show="num==1">
      <el-table :data="studentList" style="width: 100%">
        <el-table-column prop="studentNumber" label="学号" width="300"></el-table-column>
        <el-table-column prop="name" label="姓名" width="300"></el-table-column>
        <el-table-column prop="house" label="学院" width="300"></el-table-column>
        <el-table-column prop="id" width="0" v-if="false"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="deleteStudent(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination  v-show="num==1"
                    layout="total, prev, pager, next"
                    :page-size="paginationStu.page_size"
                    :current-page="paginationStu.index"
                    :total="paginationStu.total"
                    @current-change="changeStudentPage">
    </el-pagination>
    <el-button type="primary" style="float: right; margin-top: 10px;margin-right: 50px" @click="userDialogVisible = true">增加用户
    </el-button>
  </div>
</template>

<script>
import {addUser, verifyDelete, searchTeacher, searchStudent, deleteTeacher, deleteStudent} from '../../../api/adminManage'

export default {
  name: 'QuestionManage',
  data () {
    return {
      // 分页信息
      pagination: {
        page_size: 10,
        index: 1,
        total: 100
      },
      paginationStu: {
        page_size: 10,
        index: 1,
        total: 100
      },
      // 增加user
      addUserForm: {},
      userName: '',
      // 添加用户的dialog查看
      userDialogVisible: false,
      // 验证管理员账号
      pw: '',
      // 要删除的老师id
      teacherIdDel: '',
      // 要删除的学生id
      studentIdDel: '',
      // 删除用户的dialog查看
      deleteDialogVisible: false,
      // 学生1老师0列表切换
      num: 0,
      // 搜索选项切换
      search: 1,
      // 学院数组
      houseList: ['计算机学院', '数学与统计学院', '测绘学院', '遥感学院', '文学院'],
      // 正在搜索老师
      isSearchingTeacher: 0,
      // 选中老师学院
      teachersearchhouse: '',
      // 搜索老师编号
      teachersearchNumber: '',
      // 老师搜索结果
      teacherSearchList: [],
      // 正在搜索学生
      isSearchingStudent: 0,
      // 选中学生学院
      studentsearchhouse: '',
      // 搜索学生编号
      studentsearchNumber: '',
      // 学生搜索结果
      studentSearchList: [],
      // teacherList显示
      teacherList: [],
      // studentList显示
      studentList: []
    }
  },
  mounted () {
    this.getTeachers()
    this.getStudents()
  },
  methods: {
    getTeachers () {
      let info = {
        pageSize: this.pagination.page_size,
        index: this.pagination.index - 1
      }
      searchTeacher(info).then(res => {
        if (res.data.errorCode === 0) {
          console.log(res)
          var temp = res.data.data.list
          this.pagination.total = res.data.data.total
          for (var item of temp) {
            if (item.name === '') {
              item.name = '暂无'
            }
            if (item.house === '') {
              item.house = '暂无'
            }
          }
          this.teacherList = res.data.data.list
        } else {
          this.$message.info(res.data.message)
        }
      })
    },
    getStudents () {
      let info = {
        pageSize: this.paginationStu.page_size,
        index: this.paginationStu.index - 1
      }
      console.log(info)
      searchStudent(info).then(res => {
        if (res.data.errorCode === 0) {
          var temp = res.data.data.list
          console.log('studentList!!!!')
          console.log(res)
          this.paginationStu.total = res.data.data.total
          for (var item of temp) {
            if (item.name === '') {
              item.name = '暂无'
            }
            if (item.house === '') {
              item.house = '暂无'
            }
          }
          this.studentList = res.data.data.list
        } else {
          this.$message.info(res.data.message)
        }
      })
    },
    // 管理员验证
    adminVerify () {
      console.log(this.pw)
      verifyDelete(this.pw).then(res => {
        if (res.data.errorCode === 0) {
          this.$message.success('密码正确')
          if (this.num === 0) {
            this.deleteTeacherConfirm()
            this.deleteDialogVisible = false
            this.getTeachers()
          } else {
            this.deleteStudentConfirm()
            this.deleteDialogVisible = false
            this.getStudents()
          }
          this.pw = ''
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 删除老师
    deleteTeacher (teacherMes) {
      console.log(teacherMes.id)
      this.teacherIdDel = teacherMes.id
      this.deleteDialogVisible = true
    },
    deleteTeacherConfirm () {
      deleteTeacher(this.teacherIdDel).then(res => {
        console.log(res.data)
        if (res.data.errorCode === 0) {
          this.$message.success('删除成功')
          this.getTeachers()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 删除学生
    deleteStudent (studentMes) {
      console.log(studentMes.id)
      this.studentIdDel = studentMes.id
      this.deleteDialogVisible = true
    },
    deleteStudentConfirm () {
      deleteStudent(this.studentIdDel).then(res => {
        console.log(res.data)
        if (res.data.errorCode === 0) {
          this.$message.success('删除成功')
          this.getStudents()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 老师列表翻页
    changeTeacherPage (val) {
      this.pagination.index = val
      this.getTeachers()
    },
    // 学生列表翻页
    changeStudentPage (val) {
      this.paginationStu.index = val
      this.getStudents()
    },
    // 搜索内容
    choiceCheck (choice) {
      this.search = choice
    },
    // 搜索老师
    searchTeacher () {
      let info = {
        pageSize: this.pagination.page_size,
        index: this.pagination.index - 1
      }
      searchTeacher(info).then(res => {
        if (res.data.errorCode === 0) {
          this.isSearchingTeacher = 1
          if (this.search === 1) {
            var temp = res.data.data.list
            console.log('herehere')
            console.log(temp)
            this.teacherSearchList = []
            let inputValue = new RegExp(`(.*)${this.teachersearchNumber}(.*)`, 'i')
            let totalSearch = 0
            for (var item of temp) {
              console.log(this.teachersearchNumber)
              console.log(item.teacherNumber.match(inputValue))
              if (item.teacherNumber.match(inputValue) != null) {
                if (item.name === '') {
                  item.name = '暂无'
                }
                if (item.house === '') {
                  item.house = '暂无'
                }
                this.teacherSearchList.push(item)
                totalSearch = totalSearch + 1
              }
            }
            this.teacherList = this.teacherSearchList
            this.pagination.total = totalSearch
          } else {
            // console.log(res)
            var temp1 = res.data.data.list
            this.teacherSearchList = []
            let totalSearch = 0
            for (var item1 of temp1) {
              if (item1.house === this.teachersearchhouse) {
                if (item1.name === '') {
                  item1.name = '暂无'
                }
                if (item1.house === '') {
                  item1.house = '暂无'
                }
                this.teacherSearchList.push(item1)
                totalSearch = totalSearch + 1
              }
            }
            this.teacherList = this.teacherSearchList
            this.pagination.total = totalSearch
          }
        } else {
          this.$message.info(res.data.message)
        }
      })
    },
    // 搜索学生
    searchStudent () {
      let info = {
        pageSize: this.paginationStu.page_size,
        index: this.paginationStu.index - 1
      }
      searchStudent(info).then(res => {
        if (res.data.errorCode === 0) {
          this.isSearchingStudent = 1
          if (this.search === 1) {
            var temp = res.data.data.list
            console.log(temp)
            this.studentSearchList = []
            let inputValue = new RegExp(`(.*)${this.studentsearchNumber}(.*)`, 'i')
            let totalSearch = 0
            for (var item of temp) {
              console.log(this.studentsearchNumber)
              console.log(item.studentNumber.match(inputValue))
              if (item.studentNumber.match(inputValue) != null) {
                if (item.name === '') {
                  item.name = '暂无'
                }
                if (item.house === '') {
                  item.house = '暂无'
                }
                this.studentSearchList.push(item)
                totalSearch = totalSearch + 1
              }
            }
            this.studentList = this.studentSearchList
            this.paginationStu.total = totalSearch
          } else {
            // console.log(res)
            var temp1 = res.data.data.list
            this.studentSearchList = []
            let totalSearch = 0
            for (var item1 of temp1) {
              if (item1.house === this.studentsearchhouse) {
                if (item1.name === '') {
                  item1.name = '暂无'
                }
                if (item1.house === '') {
                  item1.house = '暂无'
                }
                this.studentSearchList.push(item1)
                totalSearch = totalSearch + 1
              }
            }
            this.studentList = this.studentSearchList
            this.paginationStu.total = totalSearch
          }
        } else {
          this.$message.info(res.data.message)
        }
      })
    },
    // 老师搜索的学院下拉菜单
    houseteacherCheck (name) {
      this.teachersearchhouse = name
    },
    // 学生搜索的学院下拉菜单
    housestudentCheck (name) {
      this.studentsearchhouse = name
    },
    // 关闭老师搜索
    cacelTeacherSearch () {
      this.isSearchingTeacher = 0
      this.teachersearchNumber = ''
      this.teachersearchhouse = ''
      this.getTeachers()
    },
    // 关闭学生搜索
    cacelStudentSearch () {
      this.isSearchingStudent = 0
      this.studentsearchNumber = ''
      this.studentsearchhouse = ''
      this.getStudents()
    },
    // 添加用户
    cancel () {
      this.$refs['addUserForm'].resetFields()
      this.userDialogVisible = false
    },
    addUser () {
      let that = this
      // console.log(that.addUserForm)
      addUser(that.addUserForm)
        .then(res => {
          // console.log(res)
          that.userDialogVisible = false
          if (res.status === 200) {
            that.$message({
              message: '创建用户' + that.addUserForm.id + '成功！',
              type: 'success'
            })
            this.getTeachers()
            this.getStudents()
          } else {
            that.$message.error(res)
          }
          that.$refs['addUserForm'].resetFields()
        })
    }
  }
}
</script>

<style scoped>
.breadcrumb {
  width: 1000px;
  height: auto;
  padding-top: 20px;
  padding-left: 20px;
}

.top {
  display: flex;
  justify-content: space-between;
}

.top .searchBox {
  margin-top: 35px;
  margin-right: 50px;
}

.top .searchBox .el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
  font-size: 16px;
  margin-right: 10px;
}

.top .searchBox .el-icon-arrow-down {
  font-size: 12px;
}

.top .searchBox .house {
  margin-right: 20px;
  color: #5188b8;
}

.top .tab {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  margin-top: 30px;
  margin-left: 60px;
  cursor: pointer;
}

.top .tab .usertype {
  padding: 10px;
  margin-left: -2px;
  border: solid 2px #e5e4e9;
}

.top .searchBox .inputBox {
  width: 300px;
  margin-right: 20px;
}

.table {
  width: 90%;
  margin: 20px auto;
}
</style>
